<template>
	<!-- 账户设置 -->
	<view class="accountSetting-main" v-if="userInfo">
		<!-- 用户 -->
		<view class="accountSetting-use" @click="goToPath('/pages/editUser/editUser')">
			<view class="userImage">
				<image :src="userInfo.avatar" style="width: 90rpx; height: 90rpx; border-radius: 50%; background-color: #f3f3f3"></image>
			</view>
			<view class="user-info">
				<view class="name">
					{{ userInfo.nickname || '暂无名称' }}
				</view>
				<view class="iphone">手机号:{{ userInfo.mobile || '未绑定手机号' }}</view>
			</view>
			<view class="user-icon">
				<uni-icons type="forward" size="20" color="#444"></uni-icons>
			</view>
		</view>

		<!-- 账户安全 -->
		<view class="accountSetting-secure">
			<view class="settingTitle">账号安全</view>
			<view class="settingList">
				<!-- #ifdef APP -->
				<view class="settingItem">
					<view class="settingItem-left">
						<uni-icons type="weixin" size="24" class="icons" color="#0ac262"></uni-icons>
						<text>微信绑定</text>
					</view>
					<view class="settingItem-rigth">
						<text>请选择微信绑定</text>
						<uni-icons type="forward" size="20" class="icons" color="#444"></uni-icons>
					</view>
				</view>
				<!-- #endif -->
				<view class="settingItem" v-if="!userInfo.mobile">
					<button open-type="getPhoneNumber" class="loginBtnSty" @getphonenumber="getPhoneNumber">
						<u-icon name="phone-fill" size="24" class="icons" color="#3596f0"></u-icon>
						<text>绑定手机号</text>
					</button>
					<view class="settingItem-rigth">
						<uni-icons type="forward" size="20" class="icons" color="#444"></uni-icons>
					</view>
				</view>
				<view class="settingItem" style="border: none" @click="cancelAccount">
					<view class="settingItem-left">
						<uni-icons type="person-filled" size="24" class="icons" color="#f8845d"></uni-icons>
						<text>账号注销</text>
					</view>
					<view class="settingItem-rigth">
						<text>注销后无法恢复</text>
						<uni-icons type="forward" size="20" class="icons" color="#444"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<!-- 交易设置 -->
		<view class="accountSetting-Trading">
			<view class="settingTitle">交易设置</view>
			<view class="settingList">
				<view class="settingItem" @click="getpaysetPayPassword">
					<view class="settingItem-left">
						<uni-icons type="locked" size="24" class="icons" color="#e43927"></uni-icons>
						<text>设置支付密码</text>
					</view>
					<view class="settingItem-rigth">
						<uni-icons type="forward" size="20" class="icons" color="#444"></uni-icons>
					</view>
				</view>

				<view class="settingItem" style="border-bottom: none" @click="goToPath('/pages/invoice/invoice')">
					<view class="settingItem-left">
						<uni-icons type="folder-add-filled" size="24" class="icons" color="#ffb404"></uni-icons>
						<text>发票抬头管理</text>
					</view>
					<view class="settingItem-rigth">
						<uni-icons type="forward" size="20" class="icons" color="#444"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<!-- 其他 -->
		<view class="accountSetting-orther">
			<view class="settingTitle">其他</view>
			<view class="settingList">
				<view class="settingItem" @click="goToPath('/pages/addressList/addressList')">
					<view class="settingItem-left">
						<uni-icons type="location" size="24" class="icons" color="#3596f0"></uni-icons>
						<text>地址管理</text>
					</view>
					<view class="settingItem-rigth">
						<text>设置地址信息</text>
						<uni-icons type="forward" size="20" class="icons" color="#444"></uni-icons>
					</view>
				</view>

				<view class="settingItem">
					<button open-type="contact" class="loginBtnSty">
						<u-icon name="server-man" size="24" class="icons" color="#6561f0"></u-icon>
						<text>专属客服</text>
					</button>
					<view class="settingItem-rigth">
						<text>问题咨询</text>
						<uni-icons type="forward" size="20" class="icons" color="#444"></uni-icons>
					</view>
				</view>

				<view class="settingItem" style="border-bottom: none" @click="goToPath('/pages/storeSide/aboutApp/aboutApp')">
					<view class="settingItem-left">
						<uni-icons type="help" size="24" class="icons" color="#ff81f3"></uni-icons>
						<text>关于应用</text>
					</view>
					<view class="settingItem-rigth">
						<text>V{{ getAppVersion() }}</text>
						<uni-icons type="forward" size="20" class="icons" color="#444"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<view class="addAddress-btn" :style="bottomStyle">
			<u-button type="primary" color="#e43927" text="退出登录" shape="circle" @click="outLogin"></u-button>
		</view>
	</view>
</template>

<script>
import { userLogout, usermobile, paysetPayPassword, userUserinfo } from '../../api/home/index.js';
import { imageUrl } from '../../utils/tools.js';
export default {
	data() {
		return {
			// 用户信息
			userInfo: null
		};
	},
	computed: {
		bottomStyle() {
			const systemInfo = uni.getSystemInfoSync();
			const { safeAreaInsets } = systemInfo;
			const bottomSafeAreaHeight = safeAreaInsets.bottom || 0;
			return `padding-bottom: ${bottomSafeAreaHeight ? bottomSafeAreaHeight + 'px' : '20rpx'}`;
		}
	},
	async onShow() {
		await this.getuserUserinfo();
	},
	methods: {
		goToPath(path) {
			uni.navigateTo({
				url: path
			});
		},

		// 获取用户信息
		async getuserUserinfo() {
			try {
				const resData = await userUserinfo();
				this.userInfo = resData.data;
				this.userInfo.avatar = imageUrl(this.userInfo.avatar);
			} catch (e) {
				throw Error(e);
			}
		},

		// 退出登录
		async outLogin() {
			uni.showModal({
				title: '提示',
				cancelText: '取消',
				confirmText: '确认退出',
				confirmColor: '#bb412e',
				content: '是否退出当前登录？',
				success: async (res) => {
					if (res.confirm) {
						try {
							const resData = await userLogout();
							uni.removeStorageSync('token');
							uni.removeStorageSync('userInfo');
							uni.removeStorageSync('searchTags');
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/loginMain/loginMain'
								});
							}, 500);
						} catch (e) {
							throw Error(e);
						}
					}
				}
			});
		},

		// 注销账号
		cancelAccount() {
			uni.showModal({
				title: '提示',
				cancelText: '取消',
				confirmText: '确认注销',
				confirmColor: '#bb412e',
				content: '注销后无法恢复，是否继续？',
				success: async (res) => {
					if (res.confirm) {
						const resData = await userLogout();
						uni.removeStorageSync('token');
						uni.removeStorageSync('userInfo');
						uni.removeStorageSync('searchTags');
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/loginMain/loginMain'
							});
						}, 500);
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},

		// 绑定手机号
		async getPhoneNumber(res) {
			const resData = await usermobile({
				code: res.detail.code
			});
			uni.showToast({
				title: '绑定成功',
				icon: 'none'
			});
			await this.getuserUserinfo();
		},

		// 设置支付密码
		async getpaysetPayPassword() {
			try {
				const resData = await paysetPayPassword();
				uni.navigateToMiniProgram({
					appId: 'wxc46c6d2eed27ca0a',
					path: 'pages/merchantAddress/merchantAddress',
					extraData: {
						targetUrl: resData.data.url
					},
					envVersion: 'release',
					success(res) {
						console.log(res);
					}
				});
			} catch (e) {
				throw Error(e);
			}
		},

		// 版本号
		getAppVersion() {
			// #ifdef MP-WEIXIN
			if (uni.getSystemInfoSync().platform === 'android' || uni.getSystemInfoSync().platform === 'ios') {
				const version = plus.runtime.version;
				return version;
			} else {
				return '1.0.1';
			}
			// #endif

			return '1.0.1';
		}
	}
};
</script>

<style scoped lang="scss">
.accountSetting-main {
	box-sizing: border-box;
	padding: 20rpx;
	.accountSetting-use {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		background-color: #fff;
		border-radius: 24rpx;
		padding: 30rpx;
		.userImage {
			width: 110rpx;
		}

		.user-info {
			flex: 1;
			.name {
				font-size: 32rpx;
				font-weight: bold;
			}
			.iphone {
				color: #999;
				margin-top: 10rpx;
			}
		}

		.user-icon {
			width: 80rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.accountSetting-secure {
		background-color: #fff;
		padding: 30rpx;
		padding-bottom: 10rpx;
		border-radius: 24rpx;
		margin-top: 20rpx;
	}

	.accountSetting-Trading {
		background-color: #fff;
		padding: 30rpx;
		padding-bottom: 10rpx;
		border-radius: 24rpx;
		margin-top: 20rpx;
	}

	.accountSetting-orther {
		background-color: #fff;
		padding: 30rpx;
		padding-bottom: 10rpx;
		border-radius: 24rpx;
		margin-top: 20rpx;
		margin-bottom: 200rpx;
	}

	.addAddress-btn {
		position: fixed;
		bottom: 0rpx;
		left: 0px;
		width: 100%;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 0px 20rpx;
		padding-top: 20rpx;
		background-color: #fff;
	}
}

.settingTitle {
	margin-bottom: 20rpx;
	font-size: 28rpx;
}

.settingList {
	.settingItem {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		height: 110rpx;
		border-bottom: 1px #f3f3f3 solid;
		font-size: 30rpx;
		.settingItem-left {
			display: flex;
			align-items: center;
			color: #000;
			.icons {
				margin-right: 4px;
			}
		}
		.settingItem-rigth {
			display: flex;
			align-items: center;
			color: #999;
			font-size: 26rpx;
			.icons {
				margin-left: 2px;
			}
		}
	}
}

.loginBtnSty {
	background-color: #fff;
	flex: 1;
	display: flex;
	align-items: center;
	font-size: 30rpx;
	border: none;
	/* 清除所有边框 */
	padding: 0;
	/* 清除内边距 */
	margin: 0;
	/* 清除外边距 */
}

.loginBtnSty::after {
	border: none;
}
</style>
